<template>
  <div class="emaBox">
    <div class="setting-page">
      <!--<img src="/src/assets/settinyschool/find_head_url.jpg" alt class="find-head-img"/>-->
      <div class="find-navbar">发现页</div>

      <!--左侧预览区域-->
      <vuedraggable v-model="list" handle=".contentList" class="wrapper" animation="300">
        <transition-group>
          <div
            v-for="(item,index) in list"
            :key="index"
            :class="leftIndex === index ? 'border' : ''"
            class="contentList"
            @click="left_click(index)"
          >
            <!--删除按钮-->
            <div v-if="leftIndex === index" class="close" @click.stop @click="close(item.id)">
              <img src="../../../assets/settinyschool/delete.png" alt />
            </div>
            <!--图片广告左侧预览组件-->
            <imageAd v-if="item.type === 'image_ad'" :list="list" :left-index="index" />
            <bannerAd v-if="item.type === 'banner_ad'" :list="list" :left-index="index" />
            <course v-if="item.type === 'course'" :list="list" :left-index="index" />
            <class v-if="item.type === 'class'" :list="list" :left-index="index" />
            <navTab v-if="item.type === 'navTab'" :list="list" :left-index="index" />
            <tabMenu v-if="item.type === 'tabMenu'" :list="list" :left-index="index" />
          </div>
        </transition-group>
      </vuedraggable>
      <div class="multi-find-section find-section clearfix">
        <div class="section-title">基础组件</div>
        <div class="section-button-group clearfix">
          <el-button style="width:30%" @click="addImageAd()">轮播图</el-button>
          <el-button style="width:30%" @click="addCourse()">热门排行</el-button>
          <el-button style="width:30%" @click="addClass()">推荐课程</el-button>
          <el-button style="width:30%" @click="addBannerAd()">本周精选</el-button>
          <el-button style="width:30%" @click="addMembers()">导航菜单</el-button>
<!--          <el-button style="width:30%" @click="addTabmenu()">tab栏</el-button>-->
        </div>
      </div>
      <!-- 底部tab -->
      <div class="find-footer">
        <div class="find-footer-item active" style="width: 32%;">
          <i class="el-icon-magic-stick find-footer-item__icon"></i>
          <span class="find-footer-item__text">发现</span>
        </div>
        <div class="find-footer-item" style="width: 33%;">
          <i class="el-icon-reading find-footer-item__icon"></i>
          <span class="find-footer-item__text">学习</span>
        </div>
        <div class="find-footer-item" style="width: 32%;">
          <i class="el-icon-user find-footer-item__icon"></i>
          <span class="find-footer-item__text">我的</span>
        </div>
      </div>
    </div>
    <el-button type="primary" class="saveBtn" @click="addAssembly">保存</el-button>
  </div>
</template>
<script>
import vuedraggable from 'vuedraggable'
import ImageAd from './find/imageAd'
import BannerAd from './find/bannerAd'
import Course from './find/courseList'
import Class from './find/classList'
import navTab from './find/navtab'
import tabMenu from './find/tabMenu'

import { batchSave, list, del, delImage } from '@/api/system/mobile_assembly'
import { getTenantId } from '@/utils/auth'

export default {
  components: {
    vuedraggable,
    ImageAd,
    BannerAd,
    Course,
    Class,
    navTab,
    tabMenu
  },
  data() {
    return {
      leftIndex: 0,
      list: []
    }
  },
  created() {
    this.getListData()
  },
  methods: {
    left_click(index) {
      console.log(index);
      var that = this;
      that.leftIndex = index;
      for (let i = 0; i < that.list.length; i++) {
        that.list[i].showRight = false;
        this.$set(that.list, i, that.list[i])
      }
      // this.$set(that.list,that.list)
      that.list[that.leftIndex].showRight = true;
      console.log(that.list)
    },
    getListData() {
      list(getTenantId(), 'f').then(response => {
        console.log(response.data.items);
        this.list = response.data.items;
        this.list.map(item => {
          if (item.type === 'coupon') item.couponInfo = [];
          if (item.type === 'assemble') item.assembleInfo = [];
          if (item.type === 'bargain') item.bargainInfo = [];
          if (item.type === 'seckill') item.seckillInfo = []
        })
      })
    },
    traverseList() {
      var that = this;
      this.leftIndex = that.list.length - 1;
      for (let i = 0; i < that.list.length; i++) {
        that.list[i].showRight = false;
        this.$set(that.list, i, that.list[i])
      }
      that.list[that.leftIndex].showRight = true
    },
    addImageAd() {
      var that = this;
      that.list.push({
        cardRight: 1,
        type: 'image_ad',
        modelType: 'f',
        showRight: true,
        tenantId: getTenantId(),
        images: [
          {
            url: require('../../../assets/editapp/banner.png')
          }
        ]
      });
      this.traverseList()
    },
    addBannerAd() {
      var that = this;
      that.list.push({
        cardRight: 2,
        type: 'banner_ad',
        modelType: 'f',
        showRight: true,
        courseType: '',
        recentDay: '',
        limit: '3',
        title: '本周精选',
        tenantId: getTenantId(),
        courseList: [
          {
            url: require('../../../assets/editapp/img_jingxuanke2x.png'),
            title: '儿童视宝护眼台灯VL234升级版最新款',
            hour: '20课时',
            hot: '2999',
            content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容'
          },
        ]
      });
      this.traverseList()
    },
    addCourse() {
      var that = this;
      that.list.push({
        cardRight: 3,
        type: 'course',
        modelType: 'f',
        showRight: true,
        courseType: '',
        recentDay: '',
        limit: '3',
        title: '热门排行',
        tenantId: getTenantId(),
        courseList: [
          {
            url: require('../../../assets/editapp/img_012.png'),
            title: '儿童视宝护眼台灯VL234升级版最新款',
            hour: '20课时',
            hot: '2999',
            sale: '20'
          },
          {
            url: require('../../../assets/editapp/banner3.png'),
            title: '儿童视宝护眼台灯VL234升级版最新款',
            hour: '20课时',
            hot: '2999',
            sale: '20'
          },
          {
            url: require('../../../assets/editapp/banner4.png'),
            title: '儿童视宝护眼台灯VL234升级版最新款',
            hour: '20课时',
            hot: '87299',
            sale: '20'
          },
        ]
      });
      this.traverseList()
    },
    addClass() {
      var that = this;
      that.list.push({
        cardRight: 4,
        type: 'class',
        modelType: 'f',
        showRight: true,
        courseType: 'all',
        recentDay: '',
        limit: 2,
        title: '推荐课程',
        // courseTab: [],
        tenantId: getTenantId(),
          images: [
          {
            url: require('../../../assets/editapp/banner5.png'),
            linkRadio: 'instationLink',
            link: '',
            customLink: '',
            selfAdaption: 'yes'
          }
        ],
        courseList: [
          {
            url: require('../../../assets/editapp/img_03.png'),
            title: '西瓜创客6节编程课+3节家长智慧课堂',
            study: '已更新32期',
            hot: '1.2',
            money: '￥399'
          },
          {
            url: require('../../../assets/editapp/img_03.png'),
            title: '西瓜创客6节编程课+3节家长智慧课堂',
            study: '已更新32期',
            hot: '1.2',
            money: '￥399'
          },
          {
            url: require('../../../assets/editapp/img_03.png'),
            title: '西瓜创客6节编程课+3节家长智慧课堂',
            study: '已更新32期',
            hot: '1.2',
            money: '￥399'
          },
        ]
      });
      this.traverseList()
    },

    addMembers() {
      var that = this;
      that.list.push({
        cardRight: 5,
        type: 'navTab',
        modelType: 'f',
        showRight: true,
        tenantId: getTenantId(),
        tabList: [
          {
            url: require('../../../assets/editapp/icon_qiandaozhongxin2x.png'),
            link: '',
            title: '低价秒杀'
          },
          {
            url: require('../../../assets/editapp/icon_mianfeihaoke2x.png'),
            link: '',
            title: '免费好课'
          },
          {
            url: require('../../../assets/editapp/icon_meirihongbao2x.png'),
            link: '',
            title: '每日红包'
          },
          {
            url: require('../../../assets/editapp/icon_qiandaozhongxin2x.png'),
            link: '',
            title: '签到中心'
          }
        ]
      });
      this.traverseList()
    },
    addTabmenu() {
      this.list.push({
        cardRight: 6,
        type: 'tabMenu',
        modelType: 'f',
        showRight: true,
        tenantId: getTenantId(),
        tabList: ['语文','数学',]
      });
      this.traverseList()
    },

    // 删除列表
    close(id) {
      console.log(id);
      if (id) {
        del(id).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
          this.list.splice(this.leftIndex, 1)
        })
      } else {
        this.list.splice(this.leftIndex, 1)
      }
    },
    addAssembly() {
      batchSave(this.list).then(() => {
        this.$notify({
          title: '成功',
          message: '创建成功',
          type: 'success',
          duration: 2000
        });
        this.getListData()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.emaBox {
  .setting-page {
    position: relative;
    margin: 0 20px 20px;
    padding-bottom: 310px;
    width: 375px;
    min-height: 667px;
    box-sizing: border-box;
    border: 1px solid #e1e1e1;

    .find-head-img {
      width: 373px;
      vertical-align: top;
    }

    .find-navbar {
      position: relative;
      background-color: #212121;
      text-align: center;
      line-height: 56px;
      color: #fff;
      width: 374px;
      font-size: 18px;
      margin-left: -1px;
      margin-right: -1px;
    }

    .multi-find-section {
      background: #fff;
      padding: 0;

      .section-title {
        margin-left: 0;
        padding: 0 15px;
        background: #f5f5f5;
        line-height: 38px;
      }

      .section-button-group {
        padding: 7.5px 0 7.5px 15px;

        button {
          margin: 6px 2px;
        }
      }
    }

    .find-section {
      position: absolute;
      bottom: 50px;
      box-sizing: border-box;
      width: 373px;
      border-top: 1px solid #e1e1e1;
      border-bottom: 1px solid #e1e1e1;
      font-size: 14px;
    }

    // 底部样式
    .find-footer {
      position: absolute;
      bottom: 0;
      height: 50px;
      width: 100%;
      background-color: #fff;
      border-top: 1px solid #e1e1e1;

      .find-footer-item {
        display: inline-block;
        height: 100%;
        box-sizing: border-box;
        padding: 5px 0;
        font-size: 12px;
        color: #929292;
        text-align: center;

        .find-footer-item__icon {
          font-size: 26px;
        }

        .find-footer-item__text {
          display: block;
          text-align: center;
          line-height: 20px;
        }
      }

      .find-footer-item.active {
        color: #408ffb;
      }
    }
  }

  .contentList {
    border: 1px solid rgba($color: #fff, $alpha: 0);
    box-sizing: border-box;
    position: relative;

    .close {
      z-index: 3;
      position: absolute;
      top: -10px;
      right: -10px;
      width: 20px;

      img {
        width: 100%;
      }
    }
  }

  .contentList:hover {
    border: 1px solid #408ffb;
  }

  .border {
    border: 1px dotted #408ffb;
  }

  .saveBtn {
    margin-bottom: 310px;
    margin-left: 40px;
  }
}
</style>
